<template>
	<view>
		<view class="iconfont icon-hongxin2">
			你可能还喜欢
		</view>
		<view class="goods_list">
        <navigator class="goods_item"
            v-for="item in goodsList"
            :key="item.goods_id"
            :url="`/pages/goods_detail/main?goods_id={{item.goods_id}}`"
            >
        
            <view class="goods_img_wrap">
              <image mode="aspectFill" lazy-load="true" :src="item.goods_small_logo"></image>
            </view>
                        
            <view class="goods_info_wrap">
                <view class="goods_name">{{item.goods_name}}</view>
                <view class="goods_price">
                <view class="new_price">￥{{item.goods_price}}</view>
                <view class="old_price">￥{{item.goods_price-item.goods_price*0.1}}</view>
                </view>
            </view>
                
            </navigator>
		</view>
	</view>
</template>
 
<script>

	export default {
			   data(){
		   return{
			   QueryParams:{
                    query:'冲锋衣',
                    cid:'',
                    pagenum:1,
                    pagesize:20
				},
				totalPages:1,

				goodsList:[],
		   }
	   },
	   mounted(){
		   this.getGoodsList();
	   },
	   methods:{
		   getGoodsList(){
				this.request({
				url:"https://api-hmugo-web.itheima.net/api/public/v1/goods/search",
				data:this.QueryParams
				})
				.then(result=>{
				// console.log(result.goods);
        //获取总条数
                    
        const total = result.total;
                        
        //计算总页数
        this.totalPages = Math.ceil(total / this.QueryParams.pagesize);
				this.goodsList=[...this.goodsList,...result.goods]

				})
			},

	   }
	}
</script>

<style lang="scss">
	.iconfont{
		padding: 10rpx;
		margin-top: 20rpx;
		margin-left: 250rpx;
		color: #e64340;
	}

	.goods_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: content-box;
    padding: 15rpx;
    background-color: #F2f2f2;
      .goods_item {
          width: 339rpx;
          height: 472rpx;
          background-color: #fff;
          overflow: hidden;
          margin-bottom: 10rpx;
          border-radius: 5px;
        .goods_img_wrap {
          width: 339rpx;
          height: 339rpx;
          overflow: hidden;
          image {

          }
        }

        .goods_info_wrap {

          .goods_name {
            width: 280rpx;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-size: 24rpx;
            padding: 24rpx 0;
            color: #000;
            margin-left: 24rpx;
          }
          .goods_price{
            display: flex;
            .new_price {
                width: 280rpx;
                overflow: hidden;
                font-size: 24rpx;
                color: #e64340;
                margin-left: 24rpx;
            }
            .old_price{
              width: 280rpx;
              overflow: hidden;
              font-size: 24rpx;
              margin-left: 24rpx;
              color:#aaa;
              text-decoration:line-through;
            }
          }
          
        }
      }
  }
</style>